import React from 'react';
import './index.css';

function FancyBorder(props) {
  return (<div className={'FancyBorder FancyBorder-' + props.borderColor}>
    <div>
      {props.children}
    </div>
  </div>)
}
function Container(props) {
  return (
    <div className="SplitePane">
      <div className="left">{props.left}</div>
      <div className="right">{props.right}</div>
    </div>
  )
}
function Left() {
  return (
    <div className="menu">
      <ul>
        <li>菜单1</li>
        <li>菜单2</li>
        <li>菜单3</li>
      </ul>
    </div>
  )
}
function Right() {
  return (
    <div className="wrap">
      dfdf
    </div>
  )
}

function Dialog(props) {
  return (
    <div className="dialog">
      <h1 className="title">{props.title}</h1>
      <p className="message">{props.message}</p>
      <div>
        {props.children}
      </div>
    </div>
  );
}
class Combination extends React.Component {
  render() {
    return(
      <div className="page">
        <Dialog
          title="Welcome"
          message="Thank you for visiting our spacecraft!">
            <p>测试文字测试文字测试文字测试文字</p>
            <input type="text" placeholder="请填写数据"/>
          </Dialog>
        {/* <FancyBorder children="来了老弟" borderColor="red">
          <h1 className="Dialog-title">
            Welcome
          </h1>
          <p className="Dialog-message">
            Thank you for visiting our spacecraft!
          </p>  
        </FancyBorder> */}
        <Container left={ <Left /> } right={ <Right />} />
      </div>
    )
  }
}
export default Combination;
